<template>
  <div>
    <h2>Test</h2>
    <button @click="isShow=!isShow">显示/隐藏</button>
    <transition name="a" :appear="true">
      <h2 v-show="isShow"  >你好1！</h2>
    </transition>
    <transition >
      <h2 v-show="!isShow"  >你好2！</h2>
    </transition>
    <h1>组内显示的问题</h1>
    <transition-group>
      <h2 v-show="!isShow"  key="1">组内 你好1！</h2>
      <h2 v-show="isShow" key="2" >组内  你好2！</h2>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "Test",
  data(){
    return{
      isShow:true
    }
  }
}
</script>

<style scoped>
  h2{
    background-color: #01ff70;
  }
  /* 默认写v 有名字写名字*/
  .a-leave-active{
    animation: showhideh2 1s reverse;
  }
  .a-enter-active{
    animation: showhideh2 1s ;
  }
  .v-enter-active{
  /*.come{*/
    animation: showhideh2 1s;
  }
  .v-leave-active{
  /*.go{*/
    animation: showhideh2 1s reverse;
  }
  @keyframes showhideh2 {
    from{transform: translateX( -100px)}
    to{transform: translateX(0px)}
  }
</style>
